import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';
import { darken, fallBackGlobalStyle, modifyHSLColorLightness } from '../../theme/tools';
import { lightColor } from '../../theme/colors/colorLight.css';
import { darkColor } from '../../theme/colors/colorDark.css';

export const paginatorStyle = style({
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center',
});

globalStyle(`${paginatorStyle}>button`, {
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	padding: '0 0.5em',
	height: '2.2em',
	margin: '0.2em',
	userSelect: 'none',
	color: vars.color.text,
	backgroundColor: 'transparent',
	border: 'none',
	fontSize: '1rem',
});

globalStyle(`${paginatorStyle}>button:not(.disabled)`, {
	cursor: 'pointer',
});

globalStyle(`${paginatorStyle}>button:hover`, {
	color: 'red',
});

globalStyle(`${paginatorStyle}.outline>button`, {
	border: `1px solid ${vars.color.border}`,
});

globalStyle(`${paginatorStyle}>button>svg`, {
	fill: vars.color.secondaryText,
	width: '1.2em',
	height: '1.2em',
});

globalStyle(`${paginatorStyle}>button:not(.disabled):hover>svg`, {
	fill: 'red',
});

globalStyle(`${paginatorStyle}>button.svg`, {
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
});

globalStyle(`${paginatorStyle}>button.active`, {
	color: vars.color.accent,
	fontWeight: 'bold',
});

globalStyle(`${paginatorStyle}.outline>button:hover`, {
	backgroundColor: darken(vars.color.panelBackground, 0.15),
});

fallBackGlobalStyle(
	`${paginatorStyle}.outline>button:hover`,
	{
		backgroundColor: modifyHSLColorLightness(lightColor.color.panelBackground, -0.15),
	},
	{
		backgroundColor: modifyHSLColorLightness(darkColor.color.panelBackground, 0.15),
	}
);

globalStyle(`${paginatorStyle}.outline>button.active`, {
	color: vars.color.buttonText,
	borderBlockColor: vars.color.accent,
	backgroundColor: vars.color.accent,
});
